<template>
  <div @keyup="up()">
    <div class="login_nav">
      <a @click="fun('Account')" :class="lei1">账号密码登录</a>
      <a @click="fun('Phone')" :class="lei2">手机快捷登录</a>
    </div>
    <component :is="id" ref="accountData"></component>
  </div>
</template>

<script>
import Account from '@/components/login/login_account.vue'
import Phone from '@/components/login/login_phone.vue'
export default {
  data(){
    return{
      id:'Account',
      lei1:'actived',
      lei2:'',
      name:"",
      pwd:"",
    }
  },
  methods: {
    fun(data){
      this.id = data;
      this.lei1 = '';
      this.lei2 = '';
      if(data == 'Account'){
        this.lei1 = 'actived';
      }
      if(data == 'Phone'){
        this.lei2 = 'actived';
      }
    },
    up(){
      this.name = this.$refs.accountData.name;
      this.pwd = this.$refs.accountData.pwd;
      console.log("用户名："+this.name);
      console.log("密码："+this.pwd);
      this.$emit("shuju",{name:this.name,pwd:this.pwd});
    }
  },
  components:{
    Account,
    Phone
  },


}
</script>

<style scoped>
.login_nav {
  height: 0.5rem;
  /* background-color: rgb(245,245,245); */
  text-align: center;
  padding: 0 0.15rem;
  border-bottom: 1px solid rgb(230, 230, 230);
}
.login_nav a {
  line-height: 0.5rem;
  font-size: 0.14rem;
  color: rgb(155, 155, 155);
  margin: 0 0.3rem;
}
.login_nav .actived {
  color: black;
  padding-bottom: 0.05rem;
  font-weight: 700;
  border-bottom: 0.05rem solid rgb(25, 163, 254);
}
</style>